<template>
  <div>
    <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>个人信息</span>
      </div>
    </template>
    <el-divider />
    <div class="avatar" @click="avatarFlag=true">
      <img :src="options.img" />
      <div class="mask"></div>
    </div>
    <el-divider />
    <div class="info_list">

      <div>
        <span>用户名称</span>
        <span>{{userStore.name}}</span>
      </div>
      <el-divider />
      <div>
    
        <span>用户名称</span>
        <span>admin</span>
      </div>
      <el-divider />
    </div>
    
  
  </el-card>
  <el-dialog title="修改头像" v-model="avatarFlag" width="600px" >
    <el-row>
      <el-col :span="14">
        <vueCropper
        ref="cropper"
          :img="options.img"
          style="width: 100%; height: 300px;"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            :outputType="options.outputType"
            @realTime="realTime"
      ></vueCropper>

      </el-col>
      <el-col :span="10">
         <!-- 预览 -->
          <div class="preimg" v-html="options.previews.html">
           
          </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14" style="display: flex; justify-content: space-around;">

         <el-upload accept="image/*"
           :before-upload="beforeUpload" 
           :on-change="changeFile"
           >
            <el-button type="primary">选择图片</el-button>
         </el-upload>
         <el-button icon="Plus" @click="changeScale(1)"></el-button>
         <el-button icon="Minus"  @click="changeScale(-1)"></el-button>
         <el-button icon="RefreshLeft" @click="rotateLeft"></el-button>
         <el-button icon="RefreshRight" @click="rotateRight"></el-button>
      </el-col>
      <el-col :span="10"  style="display: flex; justify-content: space-around;">
        <el-button type="primary" @click="toUpload">提交</el-button>
      </el-col>
    </el-row>
  
  </el-dialog>
  </div>
</template>
<script setup>
  import {ref,reactive} from 'vue'
  import 'vue-cropper/dist/index.css'
 import useUserStore from '@/store/modules/user'
  import {VueCropper} from 'vue-cropper'; 
  import {uploadAvatar} from '@/api/system/user'
  import {useDict} from '@/utils/dict'
  // 若以封装
  let {sys_notice_type}=useDict('sys_notice_type');
  console.log(sys_notice_type,"获取字典表的数据")

  const avatarFlag = ref(false)
  let cropper=ref(null) //当前裁剪组件
  let userStore=useUserStore();
  userStore.getInfo();  //调用pinia中用户模块写好的获取用户信息的方法
 let options= reactive({
  img: userStore.avatar, //显示头像 默认用pinia存储的数据
  size: 1,
  autoCrop: true,            // 是否默认生成截图框
  autoCropWidth: 200,        // 默认生成截图框宽度
  autoCropHeight: 200,       // 默认生成截图框高度
  fixedBox: true,            // 固定截图框大小 不允许改变
  outputType: "png",         // 默认生成截图为PNG格式
  filename: 'avatar',        // 文件名称
  previews: {}               //预览数据
 })

 let realTime=(data)=>{
  console.log(data,"----------实时预览--------")
  // data.html 带样式的 标签
  // data.url 裁剪后的图片地址
    options.previews = data
 }
//  左旋转方法
let rotateLeft=()=>{
   cropper.value.rotateLeft() //左旋转方法
}
let rotateRight=()=>{
   cropper.value.rotateRight() //右旋转方法
}
 let changeScale=(num)=>{
    num=num|1
    console.log(num,"----------------")
     cropper.value.changeScale(num) //改变图片大小
 
 }
 let beforeUpload=(file)=>{ //上传之前的钩子
  console.log(file,"--------文件---------------")
  const reader = new FileReader()
    reader.readAsDataURL(file) //将图片转为base64图片
    reader.onload = () => {
      options.img = reader.result // reader.result 就是base64 格式
      options.filename = file.name //存文件名
    }

 }
 let changeFile=(file)=>{
  console.log(file.raw,"--------文件内容---------------")
  // let formdata=new FormData()
  // formdata.append('avatarfile',file.raw)
  // 通过接口  
  // uploadAvatar(formdata).then(res=>{
  //   console.log(res,"上传成功")
  // })
 }
 let toUpload=()=>{  //提交头像
  // 插件获取裁剪后的图片
  cropper.value.getCropBlob((blob)=>{
    let formdata=new FormData()
    // formdata.append('文件key',文件内容,文件名)
    formdata.append('avatarfile',blob,options.filename)
    uploadAvatar(formdata).then(res=>{
      console.log(res,"上传成功")
      avatarFlag.value=false;
      userStore.getInfo() //重新获取用户信息
    })
  }) 
 }
</script>
<style lang="scss">
.avatar{
  width: 150px;
  height:150px;
  margin: 0 auto;
  position: relative;
  img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .mask{
    display: none;
    width: 150px;
    height:150px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);

    cursor: pointer;
  
  }
  &:hover{
        .mask{   
          display: block !important;
        }
   }
}
.info_list{
  div{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    span{
      font-size: 14px;
      color: #666;
    }
  }
}
  .preimg{
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
</style>